<template>
  <div class="main">
    <div class="my">
      <div class="left">
        <div class="user">
          <a-upload
            name="filecontent"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/api/upload/img"
            :before-upload="beforeUpload"
            @change="handleChange($event, 'positiveimg')"
          >
            <div
              class="img"
              v-if="picture"
              :style="
                'background-image: url(' +
                ($store.state.localImgFlag == 'N' ? '' : imageWebUrl) +
                picture +
                ')'
              "
            ></div>
            <!-- <a-avatar v-if="picture" :src="imageWebUrl+picture" @error="$event.target.src = GLOBAL.defaultIconImg" /> -->
            <!-- <img v-if="picture" :src="imageWebUrl+picture" @error="$event.target.src = GLOBAL.defaultIconImg" alt="avatar" /> -->
            <div v-else>
              <img :src="GLOBAL.defaultIconImg" alt="image" />
            </div>
          </a-upload>
          <!-- <img :src="picture" @error="$event.target.src = GLOBAL.defaultIconImg" alt=""> -->
          <p class="name">{{ nickName }}</p>
        </div>
        <a-collapse
          v-model="activeKey"
          :expand-icon-position="expandIconPosition"
        >
          <a-collapse-panel key="1">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_1.png"
                alt=""
              />
              <span
                style="
                  display: inline-block;
                  margin-left: 16px;
                  font-size: 14px;
                  line-height: 16px;
                "
                >信息设置</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'information' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/information');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_2.png" alt="" />
                <span>企业信息</span>
              </li>
              <li
                :class="tabIndex == 'homeSet' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/homeSet');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_3.png" alt="" />
                <span>主页设置</span>
              </li>
              <li
                :class="tabIndex == 'changePassword' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/changePassword');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_4.png" alt="" />
                <span>{{ pwdFlag ? "完善密码" : "修改密码" }}</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="2">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_5.png"
                alt=""
              />
              <span
                style="
                  display: inline-block;
                  margin-left: 16px;
                  font-size: 14px;
                  line-height: 16px;
                "
                >项目管理</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'projectAdmin' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/projectAdmin');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_5.png" alt="" />
                <span>项目管理</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="3">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_6.png"
                alt=""
              />
              <span
                style="
                  display: inline-block;
                  margin-left: 16px;
                  font-size: 14px;
                  line-height: 16px;
                "
                >专家点评</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'expertComments' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/expertComments');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_6.png" alt="" />
                <span>专家点评</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="4">
            <template #header>
              <img style="width: 16px; height: 16px" src="@/assets/image/enterprise/icon_7.png" alt=""/>
              <span style="display: inline-block;margin-left: 16px;font-size: 14px;line-height: 16px;">资讯投稿</span>
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'contribution' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/contribution');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_7.png" alt="" />
                <span>资讯投稿</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="5">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_8.png"
                alt=""
              />
              <span style="display: inline-block;margin-left: 16px;font-size: 14px;line-height: 16px;"
                >创就业信息</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'startBusiness' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/startBusiness');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_8.png" alt="" />
                <span>创业信息</span>
              </li>
              <li
                :class="tabIndex == 'employment' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/employment');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_11.png" alt="" />
                <span>就业信息</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="o7">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_9.png"
                alt=""
              />
              <span
                style="
                  display: inline-block;
                  margin-left: 16px;
                  font-size: 14px;
                  line-height: 16px;
                "
                >教育培训</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'train' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/train');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_9.png" alt="" />
                <span>教育培训</span>
              </li>
            </ul>
          </a-collapse-panel>
          <a-collapse-panel key="o6">
            <template #header>
              <img
                style="width: 16px; height: 16px"
                src="@/assets/image/enterprise/icon_10.png"
                alt=""
              />
              <span
                style="
                  display: inline-block;
                  margin-left: 16px;
                  font-size: 14px;
                  line-height: 16px;
                "
                >我的消息</span
              >
            </template>
            <ul class="list">
              <li
                :class="tabIndex == 'myMessage' ? 'liactive' : ''"
                @click="
                  (e) => {
                    tabs(e, '/enterpriseCenter/myMessage');
                  }
                "
              >
                <img src="@/assets/image/enterprise/icon_10.png" alt="" />
                <span>我的消息</span>
              </li>
            </ul>
          </a-collapse-panel>
          
          <p class="back"><span @click="visible = true">退出登录</span></p>
        </a-collapse>
      </div>
      <div class="right">
        <router-view />
      </div>
      <a-modal
        :closable="false"
        dialogClass="success"
        :maskClosable="false"
        :visible="visible"
      >
        <template #footer>
          <a-button size="large" style="" @click="visible = false"
            >取消</a-button
          >
          <a-button size="large" type="primary" @click="back">退出</a-button>
        </template>
        <template #title>
          <a-icon style="color: #fb6d00" type="info-circle" />
          <span style="display: inline-block; margin-left: 10px; color: #333333"
            >提示信息</span
          >
        </template>
        <div class="successModel">
          <span>确认退出登录？</span>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import routerViewVue from "../routerView.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
      activeKey: ["1"],
      expandIconPosition: "right",
      pwdFlag: false,
      picture: "",
      nickName: "",
      visible: false,
      tabIndex: "information",
    };
  },

  computed: {
    ...mapGetters(["showpwdFlag", "shownickName"]),
  },
  watch: {
    $route(e) {
      this.ifRouter();
    },
    activeKey(key) {
      return key;
      // console.log(key);
    },
    showpwdFlag(newVal) {
      this.pwdFlag = newVal == "N";
    },
    shownickName(newVal) {
      this.nickName = newVal;
    },
  },
  mounted() {
    this.ifRouter();
    this.nickName = this.$store.state.nickName;
    this.picture = this.$store.state.picture;
    this.pwdFlag = this.$store.state.pwdFlag == "N";
  },
  methods: {
    ifRouter() {
      let e = this.$route;
      // console.log(e);
      switch (e.path) {
        case "/enterpriseCenter/information":
          this.activeKey = ["1"];
          this.tabIndex = "information";
          //企业信息
          break;
        case "/enterpriseCenter/homeSet":
          this.activeKey = ["1"];
          this.tabIndex = "homeSet";
          // 主页设置
          break;
        case "/enterpriseCenter/changePassword":
          this.activeKey = ["1"];
          this.tabIndex = "changePassword";
          //完善密码
          break;
        case "/enterpriseCenter/projectAdmin":
          this.activeKey = ["2"];
          this.tabIndex = "projectAdmin";
          //项目管理
          break;
        case "/enterpriseCenter/expertComments":
          this.activeKey = ["3"];
          this.tabIndex = "expertComments";
          //专家点评
          break;
        case "/enterpriseCenter/contribution":
          this.activeKey = ["4"];
          this.tabIndex = "contribution";
          //资讯投稿
          break;
        case "/enterpriseCenter/startBusiness":
          this.activeKey = ["5"];
          this.tabIndex = "startBusiness";
          //创业信息
          break;
        case "/enterpriseCenter/employment":
          this.activeKey = ["5"];
          this.tabIndex = "employment";
          //就业信息
          break;
        case "/enterpriseCenter/myMessage":
          this.activeKey = ["o6"];
          this.tabIndex = "myMessage";
          //我的消息
          break;
        case "/enterpriseCenter/train":
          this.activeKey = ["o7"];
          this.tabIndex = "train";
          //我的订单
          break;
        case "/enterpriseCenter/myInvoice":
          this.activeKey = ["o8"];
          this.tabIndex = "myInvoice";
          //我的订单
          break;

        default:
          break;
      }
    },
    // 退出登录清空状态
    back() {
      this.$ajax({
        url: "/authority/user/singOut",
        method: "post",
      });
      // 清除下次默认登陆的状态
      // localStorage.setItem('loginStatus',false);
      // localStorage.setItem('userName','');
      // localStorage.setItem('password','');
      localStorage.setItem("rememberPassword", false);
      localStorage.setItem("userName", "");
      localStorage.setItem("password", "");
      this.visible = false;
      this.$store.commit("changepwdFlag", "");
      this.$store.commit("changeroleType", "");
      this.$store.commit("changemobile", "");
      this.$store.commit("changepicture", "");
      this.$store.commit("changeToken", "");
      this.$store.commit("changeuserName", "");
      this.$message.success("用户退出登录！");
      this.$router.push("/");
    },
    handleClick(event) {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    },
    tabs(e, routeLink) {
      document.querySelector(".liactive").classList.remove("liactive");
      e.target.classList.add("liactive");
      this.$router.push(routeLink);
    },
    // 图片上传
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJpgOrPng) {
        this.$message.error("请上传png、jpeg、jpg格式的头像!"); //
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传的图片最大为2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    // 修改头像
    handleChange(info, e) {
      if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code == 200
      ) {
        this.$ajax({
          url: "/user/userinfo/edit/login",
          method: "post",
          params: {
            picture: info.fileList[info.fileList.length - 1].response.data,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$store.commit("changelocalImgFlag", "Y");
            this.picture =
              info.fileList[info.fileList.length - 1].response.data;
            this.$store.commit(
              "changepicture",
              info.fileList[info.fileList.length - 1].response.data
            );
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code != 200
      ) {
        this.$message.error(
          info.fileList[info.fileList.length - 1].response.data
        );
      }
    },
  },
};
</script>

<style scoped lang="less">
.back {
  text-align: center;
  padding-top: 100px;
  padding-bottom: 50px;
  span {
    display: block;
    margin: 0 auto;
    width: 175px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #999999;
    border-radius: 4px;
    cursor: pointer;
  }
}
.avatar-uploader {
  width: 56px;
  height: 56px;
  /deep/.ant-upload-select-picture-card {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    .ant-upload {
      padding: 0;
    }
  }
}
.successModel {
  padding-left: 20px;
}
/deep/.ant-modal-header {
  border-bottom: 0;
}
/deep/.ant-modal-footer {
  border-top: 0;
}
/deep/.ant-collapse {
  border: 0;
  background: #ffffff;
  .ant-collapse-item {
    border-bottom: 1px solid #eeeeee;
  }
  .ant-collapse-item:last-child {
    border: 0;
  }
  .ant-collapse-content {
    border: 0;
    background: #f8f8f8;
    .ant-collapse-content-box {
      padding: 0;
    }
    .list {
      li {
        padding: 12px 0;
        padding-left: 51px;
        cursor: pointer;
        img {
          width: 16px;
          height: 16px;
          pointer-events: none;
        }
        span {
          display: inline-block;
          margin-left: 16px;
          font-size: 14px;
          line-height: 16px;
          pointer-events: none;
        }
      }
      .liactive {
        padding-left: 48px;
        background: #fffaef;
        border-left: 3px solid #ffbe37;
        span {
          color: #ffbe37;
        }
      }
    }
  }
  .ant-collapse-item-active {
    border: 0;
  }
}
.main {
  width: 100%;
  min-height: calc(100vh - 200px);
  background: #f5f5f5;
}
.my {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 20px 0 50px;
  justify-content: space-between;
  .left {
    width: 210px;
    .user {
      padding: 16px 0;
      text-align: center;
      margin-bottom: 21px;
      background-color: #ffffff;
      .img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
      }
      .name {
        width: 210px;
        margin-top: 4px;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
      }
    }
  }
  .right {
    width: 970px;
    padding: 26px 25px 50px;
    background-color: #ffffff;
  }
}
</style>
